<template>
    <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ background: '#fafafa', }">

        <!-- 设置 table 表格的最左侧的选择栏 -->
       <!--  <el-table-column v-if="options?.Checkbox" type="selection" :width="options?.CheckboxWidth"
            :fixed="options?.CheckboxFixed ? 'left' : ''" /> -->

        <el-table-column v-for="(item, index) in options?.column" :prop="item.prop" :label="item.label"
            :width="item.width ?? ''" />

        <!-- 设置 table 表格的最右则的操作栏 -->
        <el-table-column v-if="options?.Operation" :label="options?.OperateTitle" :width="options?.OperateWidth"
            :fixed="options?.OperateFixed ? 'right' : ''">
            <template #default="scope">
                <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <!-- 
                    点击编辑的一瞬间，会弹出一个对话框，在对话框中，会显示当前数据的所有内容，进行修改
                    确认修改完成之后，点击提交，完成编辑， 此时数据要进行重新显示
                -->
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<!-- typescript 中的双冒号是什么？？？
    ?? 和 || 的意思相似，但是又有区别，?? 相较 || 比较严谨, 当值等于0 的时候 || 就把他给排除了，但是 ?? 不会
-->
<script lang="ts" setup>
import { ref } from 'vue'
import { defineProps } from 'vue'

const props = defineProps({
    // 定义表头数据
    options: Object,
    // 定义表格数据
    tableData: {
        type: Array,
        default: () => [],
    },
})


// 通过子组件去触发父组件中的方法
const emits = defineEmits(["rowDel", "rowEdit"])

// 点击编辑表格数据的方法
const handleEdit = (type: number, item: object) => {
    emits("rowEdit", type, item)
}

// 点击删除表格数据的方法
const handleDelete = (index: number, item: object) => {
    emits("rowDel", index, item)
}

</script>
